/**
 * 公共样式 - 精简版
 * 只包含实际使用的样式
 */

// 引入依赖
@import './theme.scss';
@import './mixins.scss';

// ==============================================================================
// 全局重置样式 Global Reset
// ==============================================================================

/* 微信小程序不支持通配符选择器，使用具体元素选择器 */
page, view, text, button, input, textarea, scroll-view, swiper, swiper-item, navigator, image, video, map, canvas, open-data, web-view, ad, official-account, live-player, live-pusher, cover-view, cover-image, icon, text, rich-text, progress, checkbox, form, label, radio, slider, switch, picker, picker-view, movable-area, movable-view, contact-button {
  box-sizing: border-box;
}

/* 重置常用元素的默认样式 */
view, text, button, input, textarea {
  margin: 0;
  padding: 0;
}

page {
  background-color: $page-bg;
  color: $text-primary;
  font-size: $text-base;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

// ==============================================================================
// 布局容器 Layout Containers
// ==============================================================================

.container {
  @include page-container;
}

.content-container {
  padding: 0 0 $space-2xl 0;
}

// 页面标题
.page-title {
  @include text-variant($text-2xl, $font-bold, $text-primary);
  margin-bottom: $space-lg;
  
  .title-icon {
    margin-right: $space-sm;
    color: $primary;
  }
}

// ==============================================================================
// 通用组件样式 Common Components
// ==============================================================================

// 加载状态
.loading-container {
  @include flex-center;
  padding: $space-2xl;
  min-height: 200px;
  
  .loading-text {
    margin-top: $space-md;
      color: $text-secondary;
    font-size: $text-sm;
  }
}

// 错误状态
.error-container {
  @include flex-center;
  flex-direction: column;
  padding: $space-2xl;
  min-height: 200px;
  text-align: center;
  
  .error-icon {
    font-size: 48px;
    color: $error-light;
      margin-bottom: $space-md;
  }
  
  .error-text {
    color: $text-secondary;
    font-size: $text-base;
    margin-bottom: $space-lg;
  }
  
  .error-action {
    @include button-variant($primary, $white);
  }
}

// 空状态
.empty-container {
  @include flex-center;
  flex-direction: column;
  padding: $space-2xl;
  min-height: 200px;
  text-align: center;
  
  .empty-icon {
    font-size: 48px;
    color: $text-disabled;
    margin-bottom: $space-md;
  }
  
  .empty-text {
    color: $text-secondary;
    font-size: $text-base;
    margin-bottom: $space-lg;
  }
  
  .empty-action {
    @include button-variant($primary, $white);
  }
}

// ==============================================================================
// 按钮样式 Buttons
// ==============================================================================

// 通用按钮样式
.common-btn {
  @include button-base;
  @include button-variant($primary, $white);
  
  &.btn-sm {
    @include button-size($space-sm, $space-md, $text-sm);
  }
  
  &.btn-lg {
    @include button-size($space-md, $space-lg, $text-base);
  }
  
  &.btn-outline {
    @include button-outline($primary, $primary, $primary);
  }
  
  &.btn-ghost {
    background: transparent;
        color: $primary;
    border: 1px solid transparent;
    
    &:hover {
      background: rgba($primary, 0.1);
    }
    
    &:active {
      background: rgba($primary, 0.2);
    }
  }
  
  &.btn-text {
    background: transparent;
    color: $primary;
    border: none;
    box-shadow: none;
    
    &:hover {
      background: rgba($primary, 0.1);
    }
    
    &:active {
      background: rgba($primary, 0.2);
    }
  }
}

// ==============================================================================
// 表单样式 Forms
// ==============================================================================

.form-container {
  background: $white;
  border-radius: $radius-lg;
  padding: $space-lg;
  margin-bottom: $space-md;
  box-shadow: $shadow-sm;
}

.form-group {
  margin-bottom: $space-lg;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  @include text-variant($text-sm, $font-medium, $text-primary);
  margin-bottom: $space-xs;
  display: block;
}

.form-control {
  @include input-base;
  width: 100%;
}

.form-help {
  @include text-variant($text-xs, $font-normal, $text-secondary);
  margin-top: $space-xs;
}

.form-error {
  @include text-variant($text-xs, $font-normal, $error);
  margin-top: $space-xs;
}

// ==============================================================================
// 卡片样式 Cards
// ==============================================================================

.card {
  background: $white;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
  margin-bottom: $space-md;
  
  &:last-child {
    margin-bottom: 0;
  }
}
  
  .card-header {
    padding: $space-lg;
    border-bottom: 1px solid $border-color;
  background: $gray-50;
    
    .card-title {
    @include text-variant($text-lg, $font-semibold, $text-primary);
    margin: 0;
  }
  
  .card-subtitle {
    @include text-variant($text-sm, $font-normal, $text-secondary);
    margin: $space-xs 0 0 0;
    }
  }
  
  .card-body {
    padding: $space-lg;
  }
  
  .card-footer {
    padding: $space-lg;
    border-top: 1px solid $border-color;
  background: $gray-50;
}

// ==============================================================================
// 响应式设计 Responsive
// ==============================================================================

@media screen and (max-width: 480px) {
  .container {
    padding: $space-sm;
  }
  
  .content-container {
    padding: 0 0 $space-lg 0;
  }
  
  .form-container,
  .card {
    margin-bottom: $space-sm;
  }
  
  .card-header,
  .card-body,
  .card-footer {
    padding: $space-md;
  }
}